<template>
	<view class="container">
		<view class="top">
			<view class="title">
				<text>VIP会员</text>
			</view>
			<view class="navBar">
				<text v-for="(item,index) in title" :class="{active:currentIndex==index}" @tap="tabtap(index)"
					:key='item'>{{item}}</text>

			</view>
		</view>
		<view class="content">
			<view class="item1" v-if="currentIndex==0">
				<view class="item1-top">
					<!-- 已登录 -->
					<view v-if="token">
						<!-- 不是会员 -->
						<view class="vipBox" v-if="!userInfo.vip">
							<navigator url="../getVip/getVip">
								<view class="vipbox-content">
									<image :src="userInfo.avatarUrl" class="img"></image>
									<view class="box">
										<view class="top1">
											<text>欢迎您，{{userInfo.nickName}}</text>
											<button type="default">开通</button>
										</view>
										<text class="text1">8元开通VIP,畅学名厨独家菜谱</text>
									</view>
								</view>
								<image src="../../static/image/vip/QQ20211009-101858@2x.png">
								</image>
							</navigator>

						</view>
						<!-- 是会员 -->
						<view class="vipBox" v-else>
							<view class="vipbox-content">
								<view class="imgBox">
									<image v-if="userInfo.vip" src="../../static/image/mine/VIPIcon.png"
										class="vipIcon"></image>
									<image :src="userInfo.avatarUrl" class="img1"></image>
								</view>

								<view class="box">
									<view class="top1">
										<text>欢迎您尊贵的钻石vip会员，{{userInfo.nickName}}</text>
									</view>
									<text class="text2">会员到期时间{{userInfo.vipdate}}</text>
								</view>
							</view>
							<image src="../../static/image/vip/QQ20211009-101858@2x.png">
							</image>
						</view>
					</view>

					<!-- 未登录 -->
					<view v-else>
						<view class="vipBox1">
							<navigator url="../login/index">
								<image src="../../static/image/vip/total.png">
								</image>
							</navigator>

						</view>

					</view>


				</view>
				<!-- vip最新推荐 -->
				<videoItem :videoData='videoData'>
					<view class="vipLastestInfo">
						<text>vip最新推荐</text>
					</view>
				</videoItem>
				<!-- 限时免费体验 -->
				<videoItem :videoData='freeNowData'>
					<view class="vipLastestInfo">
						<text>限时免费体验</text>
					</view>
				</videoItem>
				<!-- 猜你喜欢 -->
				<view class="title">
					<text>猜你喜欢</text>
				</view>
				<view class="guessUlike">
					<homeLike :likeItem='item' v-for="item in likeMenuData" :key='item._id' />
				</view>
			</view>

			<view class="item2" v-if="currentIndex==1">222</view>
			<view class="item3" v-if="currentIndex==2">333</view>
			<view class="item4" v-if="currentIndex==3">444</view>
			<view class="item5" v-if="currentIndex==4">555</view>

		</view>





		<!-- 导航栏 -->
		<tabbar />
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				title: ['推荐', '免费体验', '小白入门', '快手菜', '家常菜'],
				currentIndex: 0,
				videoData: [],
				freeNowData: [],
				likeMenuData: [],
				token: ''
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {
			let token = uni.getStorageSync('token');
			this.token = token
			// console.log(token);
			this.getRecommendMenuList()
			this.getisFreeMenuList()
			this.likeMenu()
			this.vipExclusive()
			this.getUserInfo1(token)
			console.log(this.userInfo);
		},
		methods: {
			...mapActions(['getUserInfo1']),
			tabtap(index) {
				this.currentIndex = index;
			},
			tabChange(e) {
				this.currentIndex = e.detail.current;
			},
			getRecommendMenuList() {
				this.$api.vip.getRecommendMenuList().then(res => {
					this.videoData = res.menus
					// console.log(res.menus);
				})
			},
			getisFreeMenuList() {
				this.$api.vip.getisFreeMenuList().then(res => {
					this.freeNowData = res.menus
				})
			},
			likeMenu() {
				this.$api.vip.likeMenu().then(res => {
					this.likeMenuData = res.menus
					// console.log(res);
				})
			},
			vipExclusive() {
				this.$api.vip.vipExclusive().then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {


		.top {
			width: 750rpx;
			height: 220rpx;
			background-image: linear-gradient(45deg, rgb(238, 123, 45), rgb(247, 145, 28));
			text-align: center;
			overflow: hidden;
			position: fixed;
			top: 0;
			z-index: 99;

			.title {
				margin-top: 65rpx;
				color: white;
				font-size: 32rpx;
			}

			.navBar {
				color: white;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				margin-top: 56rpx;
				margin-left: 32rpx;
				align-items: center;

				.active {
					font-size: 36rpx;
				}
			}

		}

		.content {
			margin-top: 220rpx;
			padding: 14rpx 0 0 30rpx;

			.item1 {
				.title {
					font-size: 40rpx;
					color: #000;
					margin-bottom: 23rpx;
				}

				.guessUlike {
					padding-right: 32rpx;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

				}

				.vipBox {
					width: 686rpx;
					height: 324rpx;
					position: relative;

					image {
						width: 686rpx;
						height: 304rpx;
					}

					.vipbox-content {
						position: absolute;
						left: 32rpx;
						top: 32rpx;
						color: white;
						display: flex;

						.box {
							font-size: 26rpx;
							color: #939393;
							padding: 20rpx;

							.top1 {
								margin-bottom: 26rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								button {
									width: 108rpx;
									height: 34rpx;
									line-height: 34rpx;
									background-image: linear-gradient(0deg,
											#e5b293 0%,
											#f5dcc3 100%);
									border-radius: 20rpx;
									font-size: 24rpx;
								}
							}

							.text1 {
								font-size: 32rpx;
								color: white;
							}

							.text2 {
								font-size: 32rpx;
								color: #f2d5bb
							}
						}

						.imgBox {
							position: relative;
							
						}
						.img {
							width: 128rpx;
							height: 128rpx;
							border-radius: 50%;
							border: 10rpx solid white;
						}
						
						.img1 {
							width: 128rpx;
							height: 128rpx;
							border-radius: 50%;
							border: 10rpx solid #f2d5bb;
						}
						
						.vipIcon {
							position: absolute;
							width: 60rpx;
							height: 60rpx;
							right: -15rpx;
							top: -15rpx;
						}

					}


				}

				.vipBox1 {
					width: 686rpx;
					height: 324rpx;

					image {
						width: 686rpx;
						height: 304rpx;
					}
				}

				.vipLastestInfo {
					font-size: 40rpx;
					color: #000;
					margin-bottom: 23rpx;
				}
			}




		}
	}
</style>
